<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="买文博">
    <title>五星云站常用片段速查</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            color: #000;
            font-size: 18px;
            line-height: 36px;
        }

        code {
            background-color: #e8e8e8;
            padding: 2px 10px;
            border-radius: 4px;
            color: #ce1b02;
            font-size: 14px;
        }

        .main {
            width: 1000px;
            margin: 50px auto;
        }

        pre {
            background-color: #e8e8e8;
            padding: 10px;
            font-size: 14px;
            line-height: 2;
            color: #ce1b02;
            margin: 16px 0;
        }
    </style>
</head>
<body>

<!--工程片段本地开发使用Start-->
{%include '../system/temp-nav.html'%}
<!--工程片段END-->
<div class="main">
    <h2>五星云站常用片段速查</h2>
    <p>1.一般页面结构</p>
    <pre>
        &lt;!DOCTYPE html&gt;
            &lt;html lang="zh-CN"&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta http-equiv="X-UA-Compatible" content="IE=edge，chrome=1"&gt;
            &#123;#seo设置片段# &#125;
            &lt;meta name="applicable-device" content="pc"&gt;
            &lt;meta name="applicable-device" content="mobile"&gt;
            &#123;# 片段开始:header区 css文件引入 # &#125;
        &lt;body&gt;
        &#123;# 网页底部 JS文件引入 # &#125;
        &lt;/body&gt;
        &lt;/html&gt;</pre>
    <p>2. 列出指定模型下的所有分类</p>
    产品 <code>Product</code> <br>
    新闻 <code>News</code><br>
    案例 <code>Cases</code><br>
    解决方案 <code>Solutions</code><br>

    <pre>
        &#123;% for k,v in News.allCate %&#125;
            &lt;a href="&#123;&#123;v['linkurl']&#125;&#125;" class=" &#123;% if(Urlparam['id'] == k) %&#125;active&#123;% endif %&#125;"&gt;
            &#123;&#123;v['catename']&#125;&#125;&lt;/a&gt;
        &#123;%endfor%&#125;</pre>
    <p>3.获取列表数据</p>
    产品 <code>Product</code> <br>
    新闻 <code>News</code><br>
    案例 <code>Cases</code><br>
    解决方案 <code>Solutions</code><br>
    <pre>
        &#123;% for k,v in News.getListInfo(5)['data'] %&#125;
        &#123;%endfor%&#125;</pre>

    <p>4.详情页数据</p>
    <code>&#123;set d=Pageinfo%&#125; </code><br>
    页面标题<code>&#123;&#123;d['title']&#125;&#125;</code><br>

    产品标题<code>&#123;&#123;d['proname']&#125;&#125;</code><br>

    输出指定属性值<code>&#123;&#123;d['property']['属性名']['val']&#125;&#125;</code><br>


    动态输出属性键值
    <pre>
        &#123;%for k,v in d['property']%&#125;
            &#123;&#123;v['key']&#125;&#125;//属性名
            &#123;% if v['val'] is type('array') %&#125;//输出属性值
                &#123;%for key,val in v['val']%&#125;
                    &#123;&#123;val|trim&#125;&#125;&#123;%if loop.first%&#125;-&#123;%endif%&#125;
                &#123;%endfor%&#125;
            &#123;%else%&#125;
                &#123;&#123;v['val']&#125;&#125;
            &#123;%endif%&#125;
        &#123;%endfor%&#125;</pre>

    扩展字段
    <code>&#123;&#123;d['extends']['扩展字段名']['content']&#125;&#125;</code><br>
    关联信息<code>&#123;set relatePro=d['relateinfo']['product']%&#125;</code><br>
    <pre>
        &#123;for k, v in relatePro%&#125;
            <code>&#123;&#123;v['url']&#125;&#125;</code>链接
            <code>&#123;&#123;v['propic'][0]&#125;&#125;!/both/400x400</code>产品图片
            <code>&#123;&#123;v['cover'][0]&#125;&#125;!/both/400x400</code>案例图片
            <code>&#123;&#123;v['cover']&#125;&#125;!/both/400x400</code>其他图片
            <code>&#123;&#123;v['title']&#125;&#125;</code>标题
        <code>&#123;endfor%&#125;</code></pre>
    详情页翻页
    <pre>
   &lt;div class="changePage"&gt;
    &lt;div class="cell prev"&gt;
        &lt;span class="fl"&gt;上一条&lt;/span&gt;
        &#123;%if News.prev%&#125
        &lt;p class="fl"&gt;
            &lt;a href="&#123;&#123;News.prev['url']&#125&#125"&gt;&#123;&#123;News.prev['title']&#125&#125&lt;/a&gt;
        &lt;/p&gt;
        &#123;%else%&#125
        &lt;p class="fl"&gt;
            &lt;a href="javascript:;"&gt;没有了&lt;/a&gt;
        &lt;/p&gt;
        &#123;%endif%&#125
    &lt;/div&gt;
    &lt;div class="cell next"&gt;
        &lt;span class="fr"&gt;下一条&lt;/span&gt;
        &#123;%if News.next%&#125
        &lt;p class="fr"&gt;
            &lt;a href="&#123;&#123;News.next['url']&#125&#125"&gt;&#123;&#123;News.next['title']&#125&#125&lt;/a&gt;
        &lt;/p&gt;
        &#123;%else%&#125
        &lt;p class="fr"&gt;
            &lt;a href="javascript:;"&gt;没有了&lt;/a&gt;
        &lt;/p&gt;
        &#123;%endif%&#125
    &lt;/div&gt;
&lt;/div&gt;
    </pre>

    <p>6.列表类常用结构</p>
    <pre>
        &lt;div class="list-outer"&gt;
            &lt;ul class="clf"&gt;
                &lt;li&gt;
                    &lt;a href="" class="img-box"&gt;
                         &lt;img src="" alt=""&gt;
                    &lt;/a&gt;
                    &lt;div class="info"&gt;
                         &lt;a href="" class="pro-name"&gt;标题&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;</pre>
    <p>7.owl.carousel 轮播一般结构 文档地址: <a target="_blank"
                                      href="http://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html">owl.carousel</a>
    </p>
    <pre>
        &lt;div class="owl-carousel"&gt;
            &lt;div&gt; 1&lt;/div&gt;
            &lt;div&gt; 2&lt;/div&gt;
            &lt;div&gt; 3&lt;/div&gt;
        &lt;/div&gt;
        &lt;script&gt;
            $(".owl-carousel").owlCarousel(&#123;
                item: 3,
                loop: false,
                starPosition: 0,
                nav: false,
                navText: ['', ''],
                dots: true,
                onInitialized: function () &#123;&#125;
            &#125;);
        &lt;/script&gt;
    </pre>

    <p>8.swiper一般结构 文档地址：<a target="_blank" href="http://www.swiper.com.cn/api/index.html">swiper</a></p>
    <pre>
        &lt;div class="swiper-container"&gt;
            &lt;div class="swiper-wrapper"&gt;
                &lt;div class="swiper-slide"&gt;Slide 1&lt;/div&gt;
                &lt;div class="swiper-slide"&gt;Slide 2&lt;/div&gt;
                &lt;div class="swiper-slide"&gt;Slide 3&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script&gt;
            var swiper = new Swiper('.swiper-container', &#123;
                autoplay: true,
                freeMode: false,
                pagination: &#123; //轮播点
                    el: '.swiper-pagination'
                &#125;,
                navigation: &#123;//上下按钮
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                &#125;
            &#125;);
        &lt;/script&gt;
    </pre>
    <p>9.表单验证及弹窗 文档地址：<a target="_blank" href="https://validator.niceue.com/docs">Nice Validator</a></p>
    <p>每个form表单必须添加<code>&#123;&#123;Globals.token&#125;&#125;</code>和hashid <code>&lt;input type="hidden" value="" name="hashid"&gt;</code>否则表单将提交失败</p>
    <pre>
&lt;script&gt;
    var obj = &#123;
        form: function () &#123;
            //表单验证,验证配置项目
            $('.async').validator(&#123;
                fields: &#123;
                    tel: &#123;
                        rule: 'required,mobile',
                        msg: &#123;
                            required: '手机号不能为空',
                            mobile: '手机号格式错误'
                        &#125;
                    &#125;
                &#125;
            &#125;);
            //验证通过后的表单提交
            $('.async').on('valid.form', function (e) &#123;
                e.preventDefault();
                var $form = $(this),//获取当前表单
                    url = $form.attr('action'),//获取请求地址
                    data = $form.serialize();//表单数据序列化
                //发起请求
                $.ajax(&#123;
                    url: url,
                    data: data,
                    type: 'POST',
                    headers: &#123;
                        "Content-Type": "application/x-www-form-urlencoded"
                    &#125;,
                    success: function (resData) &#123;
                        var res = JSON.parse(resData);
                        if (res.status) &#123;
                            //提交成功处理
                            $.dialog(&#123;
                                type: 'def',
                                title: '提交成功！',
                                msg: '请保持手机畅通，我们会尽快与您联系'
                            &#125;);
                        &#125;
                        else &#123;
                            //提交失败处理
                            alert('FAIL!');
                        &#125;
                        //更新表单token
                        var $token = $form.find('#token');
                        $token.attr('name', res.token.key);
                        $token.val(res.token.value);
                    &#125;
                &#125;)
            &#125;);
        &#125;
    &#125;

&lt;/script&gt;
//弹窗插件
&lt;script&gt;
    $.extend(&#123;
        dialog: function (option) &#123;
            var title = option.title,
                msg = option.msg,
                type = option.type || 'def',
                after = option.after,
                before = option.before,
                html = option.html,
                diaObj = &#123;
                    //初始化
                    init: function () &#123;
                        before ? ((before instanceof Function) ? before() : console.error('before is not a function')) : 0;
                        //添加DOM
                        if (type == 'def') &#123;
                            $('body').append('&lt;div class="dialog"&gt;\n' +
                                '    &lt;div class="dia-content"&gt;\n' +
                                '        &lt;div class="dia-inner"&gt;\n' +
                                '            &lt;div class="dia-close"&gt;&lt;/div&gt;\n' +
                                '            &lt;div class="dia-tit"&gt;&lt;i&gt;&lt;/i&gt;&lt;span&gt;' + title + '&lt;/span&gt;&lt;/div&gt;\n' +
                                '            &lt;div class="dia-msg"&gt;' + msg + '&lt;/div&gt;\n' +
                                '        &lt;/div&gt;\n' +
                                '    &lt;/div&gt;\n' +
                                '&lt;/div&gt;');
                        &#125;
                        else &#123;
                            $('body').append('&lt;div class="dialog"&gt;' + html + '&lt;/div&gt;&lt;/div&gt;');
                        &#125;

                        this.diaShow();
                        this.event();
                    &#125;,
                    //弹窗显示
                    diaShow: function () &#123;
                        $('.dialog').fadeIn(200);
                    &#125;,
                    //弹窗隐藏
                    diaHide: function () &#123;
                        $('.dialog').fadeOut(200).remove();
                        //执行回调
                        after ? ((after instanceof Function) ? after() : console.error('after is not a function')) : 0;
                    &#125;,
                    event: function () &#123;
                        //点击遮罩隐藏
                        $('.dialog').on('click', function (e) &#123;
                            (e.target === e.currentTarget) ? diaObj.diaHide() : 0;
                        &#125;);
                        //点击关闭
                        $('.dialog .dia-close').on('click', function (e) &#123;
                            diaObj.diaHide();
                        &#125;);
                    &#125;
                &#125;;
            diaObj.init();
        &#125;
    &#125;);
&lt;/script&gt;
    </pre>
</div>

</body>
</html>